<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Class</title>

<script src="/versions/flanvas.32.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
	_f.traceDiv = document.getElementById("trace");
	//_f.clearTraceOnFrame = false;
	//_f.traceDraw = true;
	stage.canvas = document.getElementById('myCanvas');
	stage.fps = 24;
	
	function FunBox() {
		this._construct();
	}
	FunBox.prototype._construct = function() {
		this.x = Math.random() * (stage.stageWidth - this.width);
		this.y = Math.random() * (stage.stageHeight - this.height);
		
		// something is off with the alpha. the more items you have, the heavier the alpha is. weird..
		this.graphics.fillStyle("rgba(200,200,200,1.0)");
		var diff = Math.random() * 50;
		this.graphics.drawRect(-10 - diff / 2, -10 - diff / 2, 20 + diff, 20 + diff);
		this.graphics.fill();
		
		this.speed = Math.random() * 3;
		this.spin_speed = Math.random() * 3;
		this.rads = Math.random() * 360 / 180 * Math.PI;
		
		this.addEventListener(Event.ENTER_FRAME, function(event) {
			var t = event.target;
			if(t.x - t.width > stage.stageWidth) t.x = 0 - t.width;
			if(t.y - t.height > stage.stageHeight) t.y = 0 - t.height;
			if(t.x + t.width < 0) t.x = 550 + t.width;
			if(t.y + t.height < 0) t.y = 400 + t.height;
			t.rotation += t.spin_speed;
			t.x += Math.cos(t.rads) * t.speed;
			t.y += Math.sin(t.rads) * t.speed;
		});
		
		this.addEventListener(MouseEvent.CLICK, function(event) {
			//alert(event.target.scaleY());
			//alert(event.target);
			event.target.parent.removeChild(event.target);
		});
		this.addEventListener(Event.ENTER_FRAME, function(event) {
			//trace(event.target.height);
		});
		this.addEventListener(MouseEvent.ROLL_OUT, function(event) {
			event.target.alpha = 1.0;
			event.target.scaleX = 1.0;
			event.target.scaleY = 1.0;
		});
		this.addEventListener(MouseEvent.ROLL_OVER, function(event) {
			event.target.alpha = 0.5;
			event.target.scaleX = 1.2;
			event.target.scaleY = 1.2;
		});
	}
	FunBox.extend(Sprite);
	
	for(var i = 0; i < 30; ++i) {
		stage.addChild(new FunBox());
	}
	
	/*
	var lilBox = new Sprite();
	lilBox.graphics.fillStyle("rgba(200,200,200,0.5)");
	lilBox.graphics.fillRect(0, 0, 50, 50);
	var bigBox = new Sprite();
	
	lilBox.name = "lilBox";
	bigBox.name = "bigBox";
	
	bigBox.addChild(lilBox);
	stage.addChild(bigBox);
	
	lilBox.x = -25;
	lilBox.y = -25;
	bigBox.x = 100;
	bigBox.y = 100;
	
	bigBox.addEventListener(Event.ENTER_FRAME, function(event) {
		//bigBox.rotation += 1;
		lilBox.rotation += 1;
	});
	*/
	
	/**
	 * trace fps
	 */
	stage.addEventListener(Event.ENTER_FRAME, function(event) {
		trace(Math.ceil(_f.intervalManager.fps) + " fps");
	});
	
	/*
	alert(stage);
	
	var star = stage.getChildAt(0);
	star.x = 275;
	star.y = 200;
	var enterFrameHandler = function(event) {
		star.rotation += 10;
	}
	star.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
	*/
}
</script>
</head>

<body>

<div id="trace" width="250" height="350" style="position:absolute; right:0; text-align:right;"></div>
<canvas id="myCanvas" width="550" height="400" style="position:absolute; left:0; top:0;"></canvas>

</body>
</html>
